<template>
  <div class="bsDesImg">
    <div class="bsDesImgBox">
      <van-image width="100%" height="18rem" fit="cover" :src="bsdata.imgSrc" style="display:block;" />
      <div v-if="bsdata.hasText" class="bsDesImgMask flex_c_c_c tc_w">
        <div v-text="bsdata.content.title" class="f_16 fw_700 margin_b8"></div>
        <div v-text="bsdata.content.time" class="f_11 margin_b8"></div>
        <div class="f_11">({{bsdata.content.address}})</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'bsDesImg',
  props: {
    bsdata: {
      default: function () {
        return {}
      }
    }
  },
  data () {
    return {}
  },
  methods: {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.bsDesImg {
  .bsDesImgBox {
    position: relative;
    .bsDesImgMask {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.4);
    }
  }
}
</style>
